<template>
	<view>
		<view class="nav-bar">
			<NavBar>
				<view class="nav-bar-center" slot="center">
					<image src="/static/NavBar-project-text.png" class="project-text"></image>
					<view class="search-view">
						<image src="/static/search-icon.png" class="search-icon"></image>
						<input type="text" v-model="queryData.name" placeholder="请输入关键字" class="search-input"
							placeholder-class="search-plac-css" confirm-type="search" @confirm="onSearchEvent" />
					</view>
					<view class="search-query" @click="isDrawer = true">
						<image src="/static/query-icon.png" class="query-icon"></image>
						<view>筛选</view>
					</view>
				</view>
			</NavBar>
		</view>

		<view class="swiper-view">
			<swiper class="swiper-css" :autoplay="true" @change="(event) => swiperIndex = event.detail.current">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="`${IMG_URL}${item.imgUrl}`" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-dot">
				<view v-for="(item, index) in swiperList.length" :key="index" class="dot-item"
					:class="{'dot-active':index == swiperIndex}">
				</view>
			</view>
		</view>

		<view class="select-view">
			<view class="select-item" @click="onSortEvent('')"
				:class="{'select-active': !queryData.earningsRateFlag && !queryData.initialDeliveryAmountFlag}">综合排序
			</view>
			<view class="select-item" @click="onSortEvent('earningsRateFlag')"
				:class="{'select-active': queryData.earningsRateFlag}">
				<view>收益利率</view>
				<image v-if="queryData.earningsRateFlag == '10'" src="/static/sort-icon-top.png" class="sort-icon">
				</image>
				<image v-else-if="queryData.earningsRateFlag == '20'" src="/static/sort-icon-down.png"
					class="sort-icon"></image>
				<image v-else src="/static/sort-icon-none.png" class="sort-icon"></image>
			</view>
			<view class="select-item" @click="onSortEvent('initialDeliveryAmountFlag')"
				:class="{'select-active': queryData.initialDeliveryAmountFlag}">
				<view>出资金额</view>
				<image v-if="queryData.initialDeliveryAmountFlag == '10'" src="/static/sort-icon-top.png"
					class="sort-icon"></image>
				<image v-else-if="queryData.initialDeliveryAmountFlag == '20'" src="/static/sort-icon-down.png"
					class="sort-icon"></image>
				<image v-else src="/static/sort-icon-none.png" class="sort-icon"></image>
			</view>
		</view>
		<view class="card-project" v-for="(item, index) in projectList" :key="index">
			<CardProjectItem :item="item"></CardProjectItem>
		</view>
		<Empty v-if="!projectList.length"></Empty>
		<FloatTopButton v-if="!isDrawer"></FloatTopButton>
		<view style="height: 160upx;"></view>
		<DrawerView v-if="isDrawer" :value="queryData" @change="onDrawerChange" @close="isDrawer = false"></DrawerView>
	</view>
</template>

<script>
	import DrawerView from './components/DrawerView.vue';
	export default {
		components: {
			DrawerView
		},
		data() {
			return {
				isDrawer: false,
				swiperIndex: 0,
				swiperList: [],
				projectList: [],
				queryData: {
					total: 0,
					pageNo: 1,
					pageSize: 15,
					name: '', // 项目名称
					pushFlag: '20', // 是否推荐首页 10是 20否
					projectTypeIdList: [], // 项目类型idList
					statusList: [], // 项目状态List
					minEarningsRate: '', // 约定回报（年化） 最小
					maxEarningsRate: '', // 约定回报（年化） 最大
					minInitialDeliveryAmount: '', // 出资金额 最小
					maxInitialDeliveryAmount: '', // 出资金额 最大
					initialDeliveryAmountFlag: '', // 出资金额排序 10升序 20降序
					earningsRateFlag: '', // 预期年化收益率排序 10升序 20降序
				}
			}
		},
		onLoad() {
			this.getBannerList()
			this.getRequestList()
		},
		onPullDownRefresh() {
			this.onSearchEvent()
		},
		onReachBottom() {
			if (this.queryData.total <= this.projectList.length) return
			this.queryData.pageNo += 1
			this.getRequestList()
		},
		methods: {
			onDrawerChange(event) {
				this.isDrawer = false
				this.queryData.minInitialDeliveryAmount = event.minInitialDeliveryAmount
				this.queryData.maxInitialDeliveryAmount = event.maxInitialDeliveryAmount
				this.queryData.minEarningsRate = event.minEarningsRate
				this.queryData.maxEarningsRate = event.maxEarningsRate
				this.queryData.projectTypeIdList = event.projectTypeIdList
				this.queryData.statusList = event.statusList
				this.onSearchEvent()
			},
			/**
			 * 项目列表
			 */
			async getRequestList() {
				uni.$util.showLoading()
				const res = await uni.$api.getProjectFindPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.projectList = this.queryData.pageNo == 1 ? list : this.projectList.concat(list)
			},
			onSearchEvent() {
				this.queryData.pageNo = 1
				this.getRequestList()
			},
			/**
			 * 跳转 到 详情
			 */
			onNavDetail() {
				uni.navigateTo({
					url: '/pages/projectDetail/projectDetail'
				})
			},
			/**
			 * 排序事件
			 */
			onSortEvent(key) {
				if (!key) {
					this.queryData.initialDeliveryAmountFlag = ''
					this.queryData.earningsRateFlag = ''
				} else {
					let sort = this.queryData[key]
					if (!this.queryData[key]) this.queryData[key] = '10'
					else if (this.queryData[key] == '10') this.queryData[key] = '20'
					else if (this.queryData[key] == '20') this.queryData[key] = ''
				}
				this.onSearchEvent()
			},
			/**
			 * 获取轮播图
			 */
			async getBannerList() {
				const res = await uni.$api.bannerList(50)
				this.swiperList = res.data || []
			},
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 20;

		.nav-bar-center {
			width: calc(100vw - 60upx);
			height: 100%;
			@extend .row-between;

			.project-text {
				width: 74upx;
				height: 36upx;
			}

			.search-view {
				flex: 1;
				height: 62rpx;
				margin-left: 22upx;
				margin-right: 13upx;
				background: #F8F4F1;
				border-radius: 38rpx;
				@extend .row-start;
				padding-left: 22upx;

				.search-icon {
					width: 29upx;
					height: 29upx;
					margin-right: 8upx
				}

				.search-input {
					flex: 1;
					font-size: 25rpx;
					font-weight: 400;
				}

				.search-plac-css {
					font-size: 25rpx;
					font-weight: 400;
					color: #A48973;
				}
			}

			.search-query {
				@extend .column;
				font-size: 22rpx;
				font-weight: 400;
				color: #FFFFFF;

				.query-icon {
					width: 33upx;
					height: 33upx;
				}
			}
		}
	}


	.swiper-view {
		width: 100%;
		height: 254upx;
		position: relative;

		.swiper-css {
			width: 100%;
			height: 100%;

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-dot {
			width: 100%;
			@extend .row;
			position: absolute;
			z-index: 1;
			left: 0;
			bottom: 22upx;

			.dot-item {
				width: 14rpx;
				height: 2px;
				background: rgba($color: #FFFFFF, $alpha: 0.5);
				transition: all 0.3s;
			}

			.dot-item+.dot-item {
				margin-left: 13upx;
			}

			.dot-active {
				width: 33rpx;
				height: 2px;
				background: #FFFFFF;
			}
		}
	}

	.select-view {
		width: 100%;
		height: 76rpx;
		padding: 0 50upx;
		background: #FFFFFF;
		@extend .row-between;


		.select-item {
			@extend .row;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #2C1101;

			.sort-icon {
				width: 20upx;
				height: 20upx;
				margin-left: 9upx;
			}
		}

		.select-active {
			color: #FF442F;
		}
	}

	.card-project {
		margin-top: 20upx;
	}
</style>